<template>
  <t-dialog v-model:visible="visible" attach="body" header="选择收款阶段" width="70%">
    <custom-search ref="customSearchRef" v-slot="{ params }"
      :default-params="{ actualEndTime: [], actualBeginTime: [] }" @submit="handleInitTable">
      <t-col :span="3">
        <t-form-item label="客户名称" name="customerName">
          <t-input v-model:value="params.customerName" clearable placeholder="" />
        </t-form-item>
      </t-col>
      <t-col :span="3">
        <t-form-item label="楼盘名称" name="propertyName">
          <t-input v-model:value="params.propertyName" clearable placeholder="" />
        </t-form-item>
      </t-col>
      <t-col :span="3">
        <t-form-item label="收款期数" name="payNumber">
          <t-input v-model:value="params.payNumber" clearable placeholder="" />
        </t-form-item>
      </t-col>
     
    
     
  
    </custom-search>
    <!-- 自定义表格 -->
    <custom-table 
      ref="customTableRef" 
      row-key="id" 
      :columns="columns" 
      :api="payContractZhengCRUD.page"
      column-controller-key="FinancePayList"
      :on-before-set-data="handleTableSetData"
      >
      <template #topContent>
        <div style="margin-bottom: var(--td-comp-margin-xxl)">
          <t-radio-group v-model="companyId" theme="button" @change="handleCompanyChange">
            <t-radio-button :value="_.id" v-for="_ in companySimpleList">{{ _.name }}</t-radio-button>
          </t-radio-group>
        </div>
      </template>


      <template #engineeringStage="{ row }">
        {{ dictionaryStore.analysis('engineering_stage', row.engineeringStage) }}
      </template>
      <template #engineeringStatus="{ row }">
        {{ dictionaryStore.analysis('engineering_status', row.engineeringStatus) }}
      </template>
      <template #propertyName="{ row }">
        {{propertyInfoList.find((item) => item.id === row.propertyName)?.name}}
        <span style="color: gray;">{{ row.address }}</span>
      </template>
      <template #pressForMoneyStage="{ row }">
        {{ dictionaryStore.analysis('pay_stage', row.pressForMoneyStage) }}
      </template>
      <template #payStatus="{ row }">
        {{ dictionaryStore.analysis('pay_status', row.payStatus) }}
      </template>
      <!-- <template #engineeringCostDiff="{ row }">
        <t-link theme="primary">{{row.engineeringCostDiff}}</t-link>
      </template>
      <template #amountReceived="{ row }">
        <t-link theme="primary">{{row.amountReceived}}</t-link>
      </template> -->
      
      <template #operation="{ row }">
        <t-space break-line>
          <t-link theme="primary" @click="handleSelectedIds(row)">选择</t-link>
        </t-space>
      </template>
    </custom-table>

      
    <!-- <template #footer>
      <t-button theme="default" @click="visible = false">取消</t-button>
      <t-button theme="warning" @click="handleReset">重置</t-button>
      <t-button :loading="loadingSubmit" @click="handleSelectedIds">保存</t-button>
    </template> -->
  </t-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref, useTemplateRef, watch } from 'vue';
import { MessagePlugin, TableCol, TreeNodeModel } from 'tdesign-vue-next';

import { payContractZhengCRUD } from '@/api/finance/pay';
import { getCompanyList } from '@/api/system/dept';
import { propertyManageCRUD } from '@/api/config/property';
import CustomSearch from '@/components/custom/search/index.vue';
import CustomTable from '@/components/custom/table/index.vue';
import { useDictionaryStore } from '@/store';

const dictionaryStore = useDictionaryStore();

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  orderId: {
    type: String,
    required: true,
  },
});

const emits = defineEmits(['update:visible', 'save']);

const visible = ref(props.visible);
const companyId = ref();
const companySimpleList = ref([]);
const selectedId = ref();
const loadingSubmit = ref(false);

// 公司切换
const handleCompanyChange = () => {
  handleInitTable();
};
// 楼盘信息列表
const propertyInfoList = ref([]);
// 处理获取楼盘信息列表
const handleGetPropertyInfoList = () => {
  const params = {
    pageSize: -1,
  };
  propertyManageCRUD
    .page(params)
    .then((data) => {
      propertyInfoList.value = data.list;
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    });
};

// columns
const columns: TableCol[] = [
  { colKey: 'paymentStage', title: '收款阶段'},
  { colKey: 'engineeringStage', title: '施工阶段', fixed: 'left' },
  { colKey: 'engineeringStatus', title: '施工状态', fixed: 'left' },
  { colKey: 'payStatus', title: '支付状态', width:120},
  { colKey: 'payNumber', title: '收款期数'},
  { colKey: 'customerName', title: '客户名称', fixed: 'left' },
  { colKey: 'propertyName', title: '楼盘地址', fixed: 'left', width: 180 },
  { colKey: 'contractPrice', title: '合同金额', width:120},
  { colKey: 'amountOfMoney', title: '应收金额', width:120},
  { colKey: 'engineeringCostDiff', title: '洽商金额'},
  { colKey: 'amountReceived', title: '实付金额', width:120},
  { colKey: 'amountUnreceived', title: '未收金额', width:120},
  { colKey: 'operation', title: '操作', width: 160, fixed: 'right' },
];
const handleGetCompanySimpleList = async () => {
  return getCompanyList().then((data) => {
    companySimpleList.value = [{ id: null, name: '全部公司' }, ...data];
    companyId.value = null;
    handleGetPropertyInfoList();
    handleInitTable();
  });
};

// 自定义搜索ref
const customSearchRef = useTemplateRef('customSearchRef');
// 自定义表格ref
const customTableRef = useTemplateRef('customTableRef');


const handleInitTable = () => {
  const params = {
    ...customSearchRef.value.params,
    companyId: companyId.value,
    orderId:props.orderId
  };
  customTableRef.value.initTable(params);
};
// 处理表格设置数据
const handleTableSetData = (data: any) => {
  return data
};

const handleReset = () => {
  
};
// 选择传递
const handleSelectedIds = (row:any) => {
  const saveData = {
    collectionId: row.id,
    paymentStage: row.paymentStage
  }
  emits('save', saveData);
  visible.value = false;
};

watch(
  () => props.visible,
  async (newVal) => {
    visible.value = newVal;
    if(newVal==true) {
      await handleGetCompanySimpleList();

    
    }
  }
);

watch(visible, (newVal) => {
  emits('update:visible', newVal);
});

</script>

<style lang="less" scoped>
:deep(.t-radio-group .t-radio-button) {
  border: none;
  border-radius: 18px !important;
  margin-left: 11px;
}

:deep(.t-radio-group .t-radio-button.t-is-checked) {
  background-color: #f2f3f5;
}
</style>